// 4. 初始化 ECharts 实例并配置图表
// 4.1 获取容器DOM元素
var myChart = echarts.init(document.getElementById('chart'));
var option = {
  grid: {
    left: '3%',
    right: '4%',
    top: '9%',
    bottom: '4%',
    containLabel: true
  },
  tooltip: {
    trigger: 'item',
    textStyle: {
      fontSize: 14
    }
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      fontSize: '1rem',
      color: '#fff',
      margin: 20
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(197, 209, 218,0)' },
            { offset: 0.5, color: 'rgba(197, 209, 218,0.9)' },
            { offset: 1, color: 'rgba(197, 209, 218,0)' }
          ]
        )
      }
    },
    data: ['5月', '6月', '7月', '8月', '9月', '10月'] // X轴数据（类别）
  },
  yAxis: [
    {
      type: 'value',
      position: 'left',
      axisLabel: {
        fontSize: '1rem',
        color: '#fff'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: ['rgba(197, 209, 218,0.25)'],
          type: 'dashed' // 将横线设置为虚线
        }
      }
    },
    {
      type: 'value',
      position: 'right',
      axisLabel: {
        fontSize: '1rem',
        color: '#fff'
      },
      splitLine: {
        show: false
      }
    }
  ],
  series: [
    {
      name: '小程序',
      data: [35, 1178.16, 7096.56, 4410.3, 5177.7, 6554.4], // 核心数据
      type: 'line',
      itemStyle: {
        color: '#FFBD41'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(236, 197, 94, 0.5)'
          },
          {
            offset: 0.6,
            color: 'rgba(255, 215, 103,0)'
          }
        ])
      },
      smooth: true
    },
    {
      name: '辛庄市集',
      data: [959740.99, 375430.36, 71036.79, 40155.5, 134088.15, 282783.04], // 核心数据
      type: 'line',
      yAxisIndex: 1, // 使用右侧Y轴
      itemStyle: {
        color: '#45F5F2'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(69, 245, 242, 0.5)'
          },
          {
            offset: 0.6,
            color: 'rgba(69, 245, 242,0)'
          }
        ])
      },
      smooth: true
    }
  ]
};
myChart.setOption(option);

// 创建饼图
var pieChart = echarts.init(document.getElementById('pieChart'));
var pieOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c}场 ({d}%)',
    textStyle: {
      fontSize: 14,
      color: '#fff'
    },
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderColor: 'rgba(255, 255, 255, 0.2)',
    borderWidth: 1,
    position: function (point, params, dom, rect, size) {
      // 获取鼠标位置和tooltip尺寸
      var obj = { top: 60 };
      obj['left'] = point[0] + 10; // 在鼠标右侧10px处显示
      return obj;
    }
  },
  series: [
    {
      type: 'pie',
      radius: '70%',
      label: {
        show: false
      },
      emphasis: {
        scale: true,
        scaleSize: 10,
        itemStyle: {
          shadowBlur: 15,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      blur: {
        itemStyle: {
          opacity: 0.8
        }
      },
      labelLine: {
        show: false
      },
      data: [
        { value: 194, name: '便民服务', itemStyle: { color: '#ae67ec' } },
        { value: 4, name: '采摘', itemStyle: { color: '#b7e767' } },
        { value: 20, name: '创客', itemStyle: { color: '#75e062' } },
        { value: 1, name: '露营体验', itemStyle: { color: '#12c687' } },
        { value: 80, name: '其他活动', itemStyle: { color: '#eb675a' } },
        { value: 47, name: '骑行', itemStyle: { color: '#f7a1e8' } },
        { value: 340, name: '亲子', itemStyle: { color: '#f88f41' } },
        { value: 44, name: '全民健身', itemStyle: { color: '#3b84f3' } },
        { value: 13, name: '市集', itemStyle: { color: '#f77b52' } },
        { value: 33, name: '体育培训', itemStyle: { color: '#f7c6a1' } },
        { value: 1, name: '体育赛事', itemStyle: { color: '#f6e2a1' } },
        { value: 368, name: '文化艺术', itemStyle: { color: '#82c4f2' } },
        { value: 21, name: '研学', itemStyle: { color: '#45f5f2' } },
        { value: 19, name: '运动赛事', itemStyle: { color: '#6a61fc' } },
      ]
    }
  ]
};
pieChart.setOption(pieOption);

// 弹窗的 1- 新增粉丝趋势分析
var popChart = echarts.init(document.getElementById('popChart1'));
var popChartOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{b ({d}%)',
    textStyle: {
      fontSize: 12,
      color: '#fff'
    },
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderColor: 'rgba(255, 255, 255, 0.2)',
    borderWidth: 1
  },
  legend: {
    show: true,
    right: '10%',
    top: 'center',
    orient: 'vertical',
    textStyle: {
      color: '#fff',
      fontSize: '1rem'
    },
    itemGap: 23,
    icon: 'circle',
    itemWidth: 8,
    itemHeight: 8,
    formatter: function(name) {
      // 直接返回原始名称，因为数据中已经是"男 38.60%"格式
      return name;
    }
  },
  series: [
    {
      type: 'pie',
      radius: ['30%','46%'],
      center: ['26.3%', '50.3%'],
      padAngle: 3,
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      data: [
        {
          name: '男 38.60%',
          value: 30,
          itemStyle: {
            // 环形渐变（从上到下）
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 1, color: 'rgba(69, 245, 242,1)' },
              { offset: 0.5, color: 'rgba(69, 245, 242,0.9)' },
              { offset: 0, color: 'rgba(69, 245, 242,0)' }
            ])
          }
        },
        {
          name: '女 60.80%',
          value: 20,
          itemStyle: {
            // 环形渐变（从上到下）
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(52, 170, 255,1)' },
              { offset: 0.5, color: 'rgba(52, 170, 255,0.9)' },
              { offset: 1, color: 'rgba(52, 170, 255,0)' }
            ])
          }
        },
        {
          name: '未知 0.60%',
          value: 20,
          itemStyle: {
            // 环形渐变（从上到下）
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(233, 199, 105,1)' },
              { offset: 0.5, color: 'rgba(233, 199, 105,0.9)' },
              { offset: 1, color: 'rgba(233, 199, 105,0)' }
            ])
          }
        }
      ]
    }
  ],
};
popChart.setOption(popChartOption);

//弹窗的 2- 视频发布与观看热度分析
var popChart2 = echarts.init(document.getElementById('popChart2'));
var popChartOption2 = {
  grid: {
    left: '3%',
    right: '4%',
    top: '12%',
    bottom: '18%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    textStyle: {
      fontSize: 12,
      color: '#fff'
    },
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderColor: 'rgba(255, 255, 255, 0.2)',
    borderWidth: 1
  },
  xAxis: {
    type: 'category',
    data: ['5月','6月','7月','8月','9月','10月'],
    axisLabel: {
      fontSize: 12,
      color: '#ffffff',
      margin: 13
    }
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 8000,
    interval: 2000,
    axisLabel: {
      formatter: '{value}',
      color: '#ffffff'
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#374465'
      }
    }
  },
  series: [
    {
      name: '平台用户趋势',
      type: 'pictorialBar',
      symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
      data: [
        {value: 2638, itemStyle:{color: '#36E5D3'}},
        {value: 2638, itemStyle:{color: '#36E5D3'}},
        {value: 4680, itemStyle:{color: '#36E5D3'}},
        {value: 5086, itemStyle:{color: '#36E5D3'}},
        {value: 7227, itemStyle:{color: '#36E5D3'}},
        {value: 7908, itemStyle:{color: '#36E5D3'}},
      ],
      barWidth: '60%',
    }
  ]
};
popChart2.setOption(popChartOption2);

//弹窗的 3- popChart3折线图表
var popChart3 = echarts.init(document.getElementById('popChart3'));
var popChartOption3 = {
  grid: {
    left: '0%',
    right: '25%',
    top: '12%',
    bottom: '18%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    textStyle: {
      fontSize: '1.2rem',
      color: '#fff'
    },
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderColor: 'rgba(255, 255, 255, 0.2)',
    borderWidth: 1
  },
  legend: {
    show: true,
    right: '5%',
    top: 'center',
    orient: 'vertical',
    textStyle: {
      color: '#fff',
      fontSize: '1rem'
    },
    itemGap: 15,
    icon: 'circle',
    itemWidth: 8,
    itemHeight: 8
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      fontSize: 12,
      color: '#fff',
      margin: 13
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(197, 209, 218,0)' },
            { offset: 0.5, color: 'rgba(197, 209, 218,0.9)' },
            { offset: 1, color: 'rgba(197, 209, 218,0)' }
          ]
        )
      }
    },
    data: ['5月', '6月', '7月', '8月', '9月', '10月']
  },
  yAxis: {
    type: 'value',
    position: 'left',
    axisLabel: {
      fontSize: 12,
      color: '#fff',
      formatter: function(value) {
        if (value >= 1000) {
          return (value / 1000).toFixed(0) + 'k';
        }
        return value;
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(197, 209, 218,0.25)',
        type: 'dashed'
      }
    }
  },
  series: [
    {
      name: '0-17岁',
      type: 'line',
      data: [17, 11, 17, 2, 63, 49],
      itemStyle: {
        color: '#2BAEFF'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(43, 174, 255, 0.5)'
          },
          {
            offset: 1,
            color: 'rgba(43, 174, 255, 0)'
          }
        ])
      },
      smooth: true,
      symbol: 'circle',
      symbolSize: 6
    },
    {
      name: '18-24岁',
      type: 'line',
      data: [174, 127, 145, 41, 279, 103],
      itemStyle: {
        color: '#45F5F2'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(91, 250, 255, 0.3)'
          },
          {
            offset: 1,
            color: 'rgba(91, 250, 255, 0)'
          }
        ])
      },
      smooth: true,
      symbol: 'circle',
      symbolSize: 6
    },
    {
      name: '25-29岁',
      type: 'line',
      data: [287, 214, 299, 107, 558, 195],
      itemStyle: {
        color: '#FABA48'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(250, 186, 72, 0.7)'
          },
          {
            offset: 1,
            color: 'rgba(250, 186, 72, 0)'
          }
        ])
      },
      smooth: true,
      symbol: 'circle',
      symbolSize: 6
    },
    {
      name: '30-39岁',
      type: 'line',
      data: [1135, 1049, 989, 368, 2016, 813],
      itemStyle: {
        color: '#997EFE'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#997EFE'
          },
          {
            offset: 1,
            color: 'rgba(250, 186, 72, 0)'
          }
        ])
      },
      smooth: true,
      symbol: 'circle',
      symbolSize: 6
    },
    {
      name: '40-49岁',
      type: 'line',
      data: [875, 681, 442, 222, 1129, 468],
      itemStyle: {
        color: '#7EFEAD'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#7EFEAD'
          },
          {
            offset: 1,
            color: 'rgba(250, 186, 72, 0)'
          }
        ])
      },
      smooth: true,
      symbol: 'circle',
      symbolSize: 6
    },
    {
      name: '50岁+',
      type: 'line',
      data: [345, 314, 248, 111, 409, 154],
      itemStyle: {
        color: '#D398F1'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#D398F1'
          },
          {
            offset: 1,
            color: 'rgba(250, 186, 72, 0)'
          }
        ])
      },
      smooth: true,
      symbol: 'circle',
      symbolSize: 6
    },
    {
      name: '未知',
      type: 'line',
      data: [10, 20, 13, 6, 19, 20],
      itemStyle: {
        color: '#F7789C'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: '#F7789C'
          },
          {
            offset: 1,
            color: 'rgba(250, 186, 72, 0)'
          }
        ])
      },
      smooth: true,
      symbol: 'circle',
      symbolSize: 6
    }
  ]
};
popChart3.setOption(popChartOption3);

//弹窗的 4- popChart4折线图表
var popChart4 = echarts.init(document.getElementById('popChart4'));
var popChartOption4 = {
  grid: {
    left: '0%',
    right: '4%',
    top: '12%',
    bottom: '8%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    textStyle: {
      fontSize: 12,
      color: '#fff'
    },
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderColor: 'rgba(255, 255, 255, 0.2)',
    borderWidth: 1
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      fontSize: 12,
      color: '#fff',
      margin: 13
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(197, 209, 218,0)' },
            { offset: 0.5, color: 'rgba(197, 209, 218,0.9)' },
            { offset: 1, color: 'rgba(197, 209, 218,0)' }
          ]
        )
      }
    },
    data: ['5月', '6月', '7月', '8月', '9月', '10月']
  },
  yAxis: {
    type: 'value',
    position: 'left',
    axisLabel: {
      fontSize: 12,
      color: '#fff',
      formatter: function(value) {
        if (value >= 1000) {
          return (value / 1000).toFixed(0) + 'k';
        }
        return value;
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(197, 209, 218,0.25)',
        type: 'dashed'
      }
    }
  },
  series: [
    {
      name: '评论数',
      type: 'line',
      data: [35, 1178.16, 7095.56, 4410.3, 5177.7, 6554.4],
      itemStyle: {
        color: '#45F5F2'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(91, 250, 255, 0.3)'
          },
          {
            offset: 1,
            color: 'rgba(91, 250, 255, 0)'
          }
        ])
      },
      smooth: true,
      symbol: 'circle',
      symbolSize: 6
    },
  ]
};
popChart4.setOption(popChartOption4);

//弹窗的 5
var popChart5 = echarts.init(document.getElementById('popChart5'));
var popChartOption5 = {
  grid: {
    left: '0%',
    right: '4%',
    top: '12%',
    bottom: '8%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    textStyle: {
      fontSize: 12,
      color: '#fff'
    },
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderColor: 'rgba(255, 255, 255, 0.2)',
    borderWidth: 1
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      fontSize: 12,
      color: '#fff',
      margin: 13
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(197, 209, 218,0)' },
            { offset: 0.5, color: 'rgba(197, 209, 218,0.9)' },
            { offset: 1, color: 'rgba(197, 209, 218,0)' }
          ]
        )
      }
    },
    data: ['5月', '6月', '7月', '8月', '9月', '10月']
  },
  yAxis: {
    type: 'value',
    position: 'left',
    axisLabel: {
      fontSize: 12,
      color: '#fff',
      formatter: function(value) {
        if (value >= 1000) {
          return (value / 1000).toFixed(0) + 'k';
        }
        return value;
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(197, 209, 218,0.25)',
        type: 'dashed'
      }
    }
  },
  series: [
    {
      name: '交易笔数',
      type: 'line',
      data: [1, 35, 66, 62, 268, 159],
      itemStyle: {
        color: '#2BAEFF'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(43, 174, 255, 0.5)'
          },
          {
            offset: 1,
            color: 'rgba(43, 174, 255, 0)'
          }
        ])
      },
      smooth: true,
      symbol: 'circle',
      symbolSize: 6
    },
    {
      name: '人数趋势',
      type: 'line',
      data: [1, 29, 61, 58, 210, 117],
      itemStyle: {
        color: '#45F5F2'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(91, 250, 255, 0.3)'
          },
          {
            offset: 1,
            color: 'rgba(91, 250, 255, 0)'
          }
        ])
      },
      smooth: true,
      symbol: 'circle',
      symbolSize: 6
    },
  ]
};
popChart5.setOption(popChartOption5);

// 弹窗的 - 新增粉丝趋势分析
var popChart6 = echarts.init(document.getElementById('popChart6'));
var popChartOption6 = {
  grid: {
    left: '3%',
    right: '4%',
    top: '12%',
    bottom: '20%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    textStyle: {
      fontSize: 12,
      color: '#fff'
    },
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderColor: 'rgba(255, 255, 255, 0.2)',
    borderWidth: 1
  },
  xAxis: {
    type: 'category',
    data: ['5月','6月','7月','8月','9月','10月'],
    axisLabel: {
      fontSize: 12,
      color: '#ffffff'
    }
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 1800,
    interval: 300,
    axisLabel: {
      formatter: '{value}',
      color: '#ffffff'
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: '#374465'
      }
    }
  },
  series: [
    {
      name: '新增粉丝趋势分析',
      type: 'pictorialBar',
      symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
      data: [
        {value: 1635, itemStyle:{color: '#36E5D3'}},
        {value: 601, itemStyle:{color: '#36E5D3'}},
        {value: 223, itemStyle:{color: '#36E5D3'}},
        {value: 58, itemStyle:{color: '#36E5D3'}},
        {value: 65, itemStyle:{color: '#36E5D3'}},
        {value: 100, itemStyle:{color: '#36E5D3'}},
      ],
      barWidth: '60%',
    }
  ]
};
popChart6.setOption(popChartOption6);

//弹窗的 - 视频发布与观看热度分析
var popChart7 = echarts.init(document.getElementById('popChart7'));
var popChartOption7 = {
  grid: {
    left: '3%',
    right: '4%',
    top: '12%',
    bottom: '20%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    textStyle: {
      fontSize: 12,
      color: '#fff'
    },
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderColor: 'rgba(255, 255, 255, 0.2)',
    borderWidth: 1
  },
  legend: {
    show: true,
    bottom: '6%',
    left: 'center',
    textStyle: {
      color: '#fff',
      fontSize: 12
    },
    itemGap: 20,
    icon: 'circle',
    itemWidth: 8,
    itemHeight: 8
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      fontSize: '1rem',
      color: '#fff',
      margin: 20
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(197, 209, 218,0)' },
            { offset: 0.5, color: 'rgba(197, 209, 218,0.9)' },
            { offset: 1, color: 'rgba(197, 209, 218,0)' }
          ]
        )
      }
    },
    data: ['5月', '6月', '7月', '8月', '9月', '10月'] // X轴数据（类别）
  },
  yAxis: {
    type: 'value',
    position: 'left',
    axisLabel: {
      fontSize: '1rem',
      color: '#fff'
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: ['rgba(197, 209, 218,0.25)'],
        type: 'dashed' // 将横线设置为虚线
      }
    }
  },
  series: [
    {
      name: '视频播放量',
      data: [457324, 93136, 45804, 9470, 30835, 36075], // 核心数据
      type: 'line',
      itemStyle: {
        color: '#FABA48'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(250, 186, 72, 0.5)'
          },
          {
            offset: 0.6,
            color: 'rgba(250, 186, 72,0)'
          }
        ])
      },
      smooth: true,
      symbol: 'circle',
      symbolSize: 6
    },
    /*{
      name: '发布视频数',
      data: [6, 5, 4, 2, 3, 3], // 核心数据
      type: 'bar',
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {
            offset: 0,
            color: '#45F5F2'
          },
          {
            offset: 1,
            color: '#2BAEFF'
          }
        ]),
        borderRadius: [4, 4, 0, 0]
      },
      barWidth: '30%'
    }*/
  ]
};
popChart7.setOption(popChartOption7);

//弹窗的 - popChart13折线图表
var popChart8 = echarts.init(document.getElementById('popChart8'));
var popChartOption8 = {
  grid: {
    left: '3%',
    right: '4%',
    top: '12%',
    bottom: '20%',
    containLabel: true
  },
  tooltip: {
    trigger: 'axis',
    textStyle: {
      fontSize: 12,
      color: '#fff'
    },
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    borderColor: 'rgba(255, 255, 255, 0.2)',
    borderWidth: 1
  },
  legend: {
    show: true,
    bottom: '6%',
    left: 'center',
    textStyle: {
      color: '#fff',
      fontSize: 12
    },
    itemGap: 20,
    icon: 'circle',
    itemWidth: 8,
    itemHeight: 8
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      fontSize: 12,
      color: '#fff',
      margin: 20
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: new echarts.graphic.LinearGradient(
          0, 0, 0, 1,
          [
            { offset: 0, color: 'rgba(197, 209, 218,0)' },
            { offset: 0.5, color: 'rgba(197, 209, 218,0.9)' },
            { offset: 1, color: 'rgba(197, 209, 218,0)' }
          ]
        )
      }
    },
    data: ['5月', '6月', '7月', '8月', '9月', '10月']
  },
  yAxis: {
    type: 'value',
    position: 'left',
    axisLabel: {
      fontSize: 12,
      color: '#fff',
      formatter: function(value) {
        if (value >= 1000) {
          return (value / 1000).toFixed(0) + 'k';
        }
        return value;
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(197, 209, 218,0.25)',
        type: 'dashed'
      }
    }
  },
  series: [
    {
      name: '点赞数',
      type: 'line',
      data: [1506, 345, 205, 108, 133, 220],
      itemStyle: {
        color: '#2BAEFF'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(43, 174, 255, 0.5)'
          },
          {
            offset: 1,
            color: 'rgba(43, 174, 255, 0)'
          }
        ])
      },
      smooth: true,
      symbol: 'circle',
      symbolSize: 6
    },
    {
      name: '评论数',
      type: 'line',
      data: [293, 107, 87, 33, 25, 21],
      itemStyle: {
        color: '#45F5F2'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(91, 250, 255, 0.3)'
          },
          {
            offset: 1,
            color: 'rgba(91, 250, 255, 0)'
          }
        ])
      },
      smooth: true,
      symbol: 'circle',
      symbolSize: 6
    },
    {
      name: '转发数',
      type: 'line',
      data: [7188, 1758, 886, 260, 403, 448],
      itemStyle: {
        color: '#FABA48'
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(250, 186, 72, 0.7)'
          },
          {
            offset: 1,
            color: 'rgba(250, 186, 72, 0)'
          }
        ])
      },
      smooth: true,
      symbol: 'circle',
      symbolSize: 6
    }
  ]
};
popChart8.setOption(popChartOption8);

// 可选：监听窗口大小变化，自动调整图表尺寸
window.addEventListener('resize', function() {
  myChart.resize();
  pieChart.resize();
  popChart.resize();
  popChart2.resize();
  popChart3.resize();
  popChart4.resize();
  popChart5.resize();
  popChart6.resize();
  popChart7.resize();
  popChart8.resize();
});

// 弹窗功能
document.addEventListener('DOMContentLoaded', function() {
  const popup = document.querySelector('.pop1');
  const closeBtn = document.querySelector('.pop1 .close');

  // 点击新庄村显示弹窗
  const xinZhuangCun = document.querySelector('.point13');
  if (xinZhuangCun) {
    xinZhuangCun.addEventListener('click', function() {
      popup.classList.add('show');
    });
  }

  // 点击关闭按钮隐藏弹窗
  if (closeBtn) {
    closeBtn.addEventListener('click', function() {
      popup.classList.remove('show');
    });
  }

  // 点击弹窗外部区域关闭弹窗
  if (popup) {
    popup.addEventListener('click', function(e) {
      if (e.target === popup) {
        popup.classList.remove('show');
      }
    });
  }
});